<template>
	<view class="app"> 
		<view class="withdraw-header">
			<text class="withdraw-header-text">提现记录</text>
			<view class="create-time-choose">
				<text class="create-time-choose-text" @click="dateShowFunc">日期选择</text>	
				<u-calendar v-model="dateShow" :mode="dateMode" @change="chooseDate" btn-type="success" range-bg-color="#36BE6A" active-bg-color="#36BE6A"></u-calendar>
			</view>
		</view>
		<view class="order-list">
			<!-- 调试信息 -->
			<view v-if="list.length === 0" class="debug-info">
				<text>暂无数据</text>
			</view>
			
			<view class="withdraw-card" v-for="(item,index) in list" :key="index">
				<view class="card-header">
					<view class="order-number">
						<text class="order-number-text">{{formatOrderNumber(item.withdraw_number)}}</text>
						<!-- 微信提现标识 -->
						<view class="withdraw-type-badge" v-if="item.withdraw_type === 0">
							<text class="withdraw-type-text">微信提现</text>
						</view>
					</view>
					<view class="status-badge" :class="{
						'success': item.withdraw_status === 1,
						'pending': item.withdraw_status === 0 || item.withdraw_status === 3,
						'failed': item.withdraw_status === 2
					}">
						<text class="status-text">{{getStatusText(item.withdraw_status)}}</text>
					</view>
				</view>
				<view class="card-content">
					<view class="amount-section">
						<text class="amount-label">提现金额</text>
						<text class="amount-value">-{{item.withdraw_money}}</text>
					</view>
					<view class="info-section">
						<view class="info-item">
							<text class="info-label">申请时间</text>
							<text class="info-value">{{item.create_time}}</text>
						</view>
						<view class="info-item" v-if="item.finish_time">
							<text class="info-label">完成时间</text>
							<text class="info-value">{{item.finish_time}}</text>
						</view>
					</view>
					<!-- 确认收款按钮 -->
					<view class="confirm-section" v-if="item.withdraw_status === 1 && item.confirm !== 1 && item.withdraw_type === 0">
						<u-button 
							type="success" 
							size="mini" 
							@click="confirmWithdraw(item.withdraw_id)"
							:loading="item.confirming"
							class="confirm-btn">
							确认收款
						</u-button>
					</view>
					<!-- 已确认收款提示 -->
					<view class="confirmed-section" v-if="item.confirm === 1">
						<text class="confirmed-text">已确认收款</text>
					</view>
				</view>
			</view>
			
			<u-loadmore :status="loadMoreStatus" @loadmore="loadList"/>
			<c-safe-bottom ></c-safe-bottom>
			<view style="height: 100rpx;"></view>
		</view>
	</view>
</template>
<style scoped>  
	/* #ifdef H5 */
	.safe-bottom{ height: 0rpx;}
	/* #endif */
	
	.app {
		background-color: #f8f9fa;
		min-height: 100vh;
	}
	
	.order-list{
		padding: 20rpx;
	}
	
	.debug-info{
		background: #f0f0f0;
		padding: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 8rpx;
		text-align: center;
	}
	
	.debug-info text{
		font-size: 24rpx;
		color: #666;
	}
	
	.withdraw-card{
		background: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
		overflow: hidden;
		transition: all 0.3s ease;
	}
	
	.withdraw-card:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.card-header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 32rpx 24rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}
	
	.order-number-text{
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		line-height: 1.2;
	}
	
	.order-number{
		display: flex;
		flex-direction: column;
		gap: 8rpx;
	}
	
	.withdraw-type-badge{
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #e8f5e8;
		border-radius: 12rpx;
		padding: 4rpx 12rpx;
		width: fit-content;
	}
	
	.withdraw-type-text{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 20rpx;
		color: #36BE6A;
		line-height: 1.2;
	}
	
	.status-badge{
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		background: #f0f0f0;
	}
	
	.status-badge.success{
		background: #e8f5e8;
	}
	
	.status-badge.pending{
		background: #fff7e6;
	}
	
	.status-badge.failed{
		background: #ffe8e8;
	}
	
	.status-text{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		line-height: 1.2;
	}
	
	.status-badge.success .status-text{
		color: #52c41a;
	}
	
	.status-badge.pending .status-text{
		color: #fa8c16;
	}
	
	.status-badge.failed .status-text{
		color: #ff4d4f;
	}
	
	.status-badge.default .status-text{
		color: #666666;
	}
	
	.card-content{
		padding: 24rpx 32rpx 32rpx;
	}
	
	.amount-section{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
		padding-bottom: 24rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}
	
	.amount-label{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		line-height: 1.2;
	}
	
	.amount-value{
		font-family: Alte DIN 1451 Mittelschrift, Alte DIN 1451 Mittelschrift;
		font-weight: 700;
		font-size: 40rpx;
		color: #36BE6A;
		letter-spacing: 1px;
		line-height: 1.2;
	}
	
	.info-section{
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}
	
	.info-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.info-label{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		line-height: 1.2;
	}
	
	.info-value{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #333333;
		line-height: 1.2;
	}
	
	.confirm-section{
		margin-top: 24rpx;
		padding-top: 24rpx;
		border-top: 1rpx solid #f5f5f5;
		display: flex;
		justify-content: flex-end;
	}
	
	.confirm-btn{
		background: #36BE6A;
		color: #ffffff;
		border-radius: 20rpx;
		padding: 12rpx 32rpx;
		font-size: 24rpx;
		font-weight: 500;
	}
	
	.confirmed-section{
		margin-top: 24rpx;
		padding-top: 24rpx;
		border-top: 1rpx solid #f5f5f5;
		display: flex;
		justify-content: flex-end;
	}
	
	.confirmed-text{
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #36BE6A;
		line-height: 1.2;
	}
	
	.withdraw-header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 40rpx;
		background: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.withdraw-header-text{
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #333333;
		line-height: 1.2;
	}
	
	.create-time-choose{
		display: flex;
		align-items: center;
	}
	
	.create-time-choose-text{
		display: flex;
		align-items: center;
		padding-left: 9px;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #9FA3A4;
		background: url('@/static/images/datechoose.png') no-repeat center center;
		background-size: 100% 100%;
		width: 166rpx;
		height: 62rpx;
		border-radius: 8rpx;
	}
</style>
<script>  
	export default {
		data() {
			return {
				loadMoreStatus: "loadmore",
				list: [],
				Params:{
					pageSize:10,
					curPage:1,
					createTime:''
				},
				dateShow: false,
				dateMode: 'date'
			}
		}, 
		computed:{
			 
		},
		methods:{
			loadList(){
				console.log('开始加载提现列表，参数：', this.Params);
				this.$u.api.user.getWithdrawList(this.Params).then(res => {
					console.log('提现列表返回数据：', res);
					// 处理不同的数据格式
					if (res && res.data) {
						// 如果res.data是数组
						if (Array.isArray(res.data)) {
							this.list = res.data;
						} 
						// 如果res.data是对象，可能包含list字段
						else if (res.data.list && Array.isArray(res.data.list)) {
							this.list = res.data.list;
						}
						// 如果res.data是对象，可能包含data字段
						else if (res.data.data && Array.isArray(res.data.data)) {
							this.list = res.data.data;
						}
						// 其他情况，尝试直接使用
						else {
							this.list = Array.isArray(res.data) ? res.data : [];
						}
						console.log('设置列表数据：', this.list);
					} else {
						console.log('返回数据格式不正确：', res);
						this.list = [];
					}
				}).catch(err => {
					console.error('加载提现列表失败：', err);
					this.list = [];
				})
			},
			chooseDate(obj){
				this.Params.createTime = obj.result
				this.Params.curPage = 1
				this.list = []
				this.loadList()
			},
			dateShowFunc(){
				this.dateShow=true
			},
			// 格式化订单号，去掉withdraw_前缀
			formatOrderNumber(orderNumber) {
				if (!orderNumber) return '';
				// 如果订单号以withdraw_开头，则去掉前缀
				if (orderNumber.startsWith('withdraw_')) {
					return orderNumber.replace('withdraw_', '');
				}
				return orderNumber;
			},
			// 获取状态样式类
			getStatusClass(status) {
				const statusMap = {
					0: 'status-badge pending',    // 待处理
					1: 'status-badge success',    // 成功
					2: 'status-badge failed',     // 失败
					3: 'status-badge pending'     // 处理中
				};
				return statusMap[status] || 'status-badge default';
			},
			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					0: '待处理',
					1: '提现成功',
					2: '提现失败',
					3: '处理中'
				};
				return statusMap[status] || '未知状态';
			},
			// 确认收款
			async confirmWithdraw(withdrawId) {
				try {
					// 设置loading状态
					const item = this.list.find(item => item.withdraw_id === withdrawId);
					if (item) {
						this.$set(item, 'confirming', true);
					}
					
					const res = await this.$u.api.user.confirmWithdraw({ withdraw_id: withdrawId });
					if (res && res.code === 1) {
						this.$u.toast('确认收款成功');
						// 更新本地数据
						/**
						 * appId: "wxbd120128305f51fc"
mchId: "1699363951"
package: "ABBQO+oYAAABAAAAAADpm7SxQ3BEU/aaSEqXaBAAAADnGpepZahT9IkJjn90+1qgxvwVwnGlQ232qXBAx0dCwWuz34E2Vs4e7n9r2JlobzG85XATFY6MDRL3As3q+U7GCYlylNLZuwSkn2stO9YXt/51N+Q="

						 * 
						 */
						uni.requestMerchantTransfer({
							mchId: res.data.mchId,
							appId: res.data.appId,
							package: res.data.package,
							success: (result) => {
								uni.showToast({
									title: '确认收款成功',
									icon: 'success'
								})
								if (item) {
									this.$set(item, 'confirming', false);
									this.$set(item, 'confirm', 1);
								}
								this.loadList()
							},
							fail: (err) => {
								console.error('确认收款失败：', err);
								this.$u.toast('确认收款失败');
								if (item) {
									this.$set(item, 'confirming', false);
								}
							}
						})	
					} else {
						this.$u.toast(res.msg || '确认收款失败');
						if (item) {
							this.$set(item, 'confirming', false);
						}
					}
				} catch (err) {
					console.error('确认收款失败：', err);
					this.$u.toast('确认收款失败');
					// 重置loading状态
					const item = this.list.find(item => item.withdraw_id === withdrawId);
					if (item) {
						this.$set(item, 'confirming', false);
					}
				}
			}
		},
		onLoad(option){
			this.loadList()
		}, 
		onReady() { 

		},
		onUnload() { 
			
		}
		
	}
</script>